import { useEffect, useMemo, useState } from 'react';
import { Tabs } from 'antd';
import RolePermission from './RolePermission';
import FunPermission from './FunPermission';
import DataPermission from './DataPermission';
import { getSettings, getAppList } from './service';
import BizHeader from '@inbiz/basic/BizHeader';
import BizBody from '@inbiz/basic/BizBody';
import './style.less';
import { TextWidget } from '@inbiz/react';
const { TabPane } = Tabs;
type Iprops = {
  inbiz: any;
  appPerm: ('pc' | 'h5' | 'manage')[];
  member: ('user' | 'department' | 'group')[];
  permOption: ('fun' | 'role' | 'data')[];
  permType: ('menu' | 'action' | 'model')[];
  titleOption: any;
  style: any;
};

const Permission = (props: Iprops) => {
  const { inbiz, appPerm, member, permOption, permType, titleOption } = props;
  const containerHeight = props.style.height;
  const [currentTab, $currentTab] = useState('fun');
  const [appInfoById, $appInfoById] = useState<any[]>([]);
  const [modelShowSetting, $modelShowSetting] = useState(true);
  const appInfo = inbiz.appInfo
  const appId = inbiz.appInfo.appId;

  const callback = (key: any) => {
    $currentTab(key);
  };
  useEffect(() => {
    if (appInfo.appId) {
      //获取应用信息
      getAppList({ getVersionInfo: true }, appInfo.appId).then((res) => {
        if (!res) {
          return;
        }
        $appInfoById(res.Sites);
      });
      //获取应用设置
      getSettting(appInfo.appId);
    }
  }, [appInfo]);

  const headerPrpos = {
    ...props,
    title: titleOption,
  };

  const getSettting = (appId: string) => {
    getSettings(appId).then((res) => {
      if (res) {
        if (!res.IsCheckModelPerm) {
          $modelShowSetting(false);
        }
      }
    });
  };

  const formateAppList = (site: number) => {
    if (appInfoById?.length) {
      let newList = appInfoById?.filter((item) => {
        return item.SiteType === site;
      });
      return newList[0];
    }
  };
  const appList = useMemo(() => {
    if (appInfoById?.length) {
      let list: any[] = appInfoById || [];
      if (appPerm?.length) {
        list = appPerm.map((item) => {
          switch (item) {
            case 'pc':
              return formateAppList(0);
            case 'h5':
              return formateAppList(1);
            case 'manage':
              return formateAppList(2);
          }
        });
      }
      return list;
    } else {
      return [];
    }
  }, [appInfoById, appPerm]);
  return (
    <div className="inbiz-comp-permission">
      <BizHeader {...headerPrpos} />
      <BizBody {...props}>
        <div className="inbiz-comp-permission-content">
          <Tabs
            defaultActiveKey="fun"
            onChange={callback}
            animated={false}
            className='permission-tabs'
            style={{ height: '100%' }}
          >
            {permOption.length && permOption.includes('fun') ? (
              <TabPane
                tab={
                  <TextWidget>
                    Permission.functionPermissionSetting
                  </TextWidget>
                }
                key="fun"
                style={{ height: '100%' }}
              >
                <FunPermission
                  currentTab={currentTab}
                  appList={appList}
                  permConfig={{
                    appPerm,
                    member,
                    permOption,
                    permType: modelShowSetting
                      ? permType
                      : permType.filter((item) => item != 'model'),
                  }}
                  appId={appId}
                  containerHeight={containerHeight}
                />
              </TabPane>
            ) : (
              ''
            )}
            {permOption.length && permOption.includes('role') ? (
              <TabPane
                tab={
                  <TextWidget>Permission.rolePermissionSettings</TextWidget>
                }
                key="role"
                style={{ height: '100%' }}
              >
                <RolePermission
                  currentTab={
                    permOption.length && permOption.includes('fun')
                      ? currentTab
                      : 'role'
                  }
                  appList={appList}
                  permConfig={{
                    appPerm,
                    member,
                    permOption,
                    permType: modelShowSetting
                      ? permType
                      : permType.filter((item) => item != 'model'),
                  }}
                  appId={appId}
                  containerHeight={containerHeight}
                />
              </TabPane>
            ) : (
              ''
            )}
            {/* 屏蔽数据权限 */}
            {/* {permOption.length && permOption.includes('data') ? (
              <TabPane
                tab={
                  <TextWidget>Permission.dataPermissionSettings</TextWidget>
                }
                key="data"
                style={{ height: '100%' }}
              >
                <DataPermission appId={appId} />
              </TabPane>
            ) : (
              ''
            )} */}
          </Tabs>
        </div>
      </BizBody>
    </div>
  );
};

export default Permission;
